<template>
	<Card class="lsh-card-box">
		<template #header>
			<div class="lsh-title-box">
				<div class="lsh-title">满分{{ activeInfo.totalScore }}分</div>
				<div class="lsh-extra">
					实际得分
					<a-input-number
						class="lsh-score-input"
						v-model:model-value="nowScore"
						:min="0"
						:max="activeInfo.totalScore"
						@change="hanInput"
						hide-button
					/>
					分
				</div>
			</div>
		</template>
		<div class="lsh-set-score">
			<div class="lsh-top">
				<div
					:class="{
						'lsh-btn-item': true,
						[item.class]: true,
						active: nowScore === item.value
					}"
					v-for="(item, index) in scoreList"
					:key="item.label"
					@click="hanSetScore(item.value)"
				>
					{{ item.label }}
				</div>
			</div>
			<div class="lsh-bottom">
				<a-button type="outline" @click="hanChangeTopic(false)"
					>上一{{ endText }}</a-button
				>
				<a-button type="primary" @click="hanChangeTopic(true)">{{
					nextText
				}}</a-button>
			</div>
		</div>
	</Card>
</template>
<script setup lang="ts">
import Card from '../card/index.vue'
import { isUndefined } from '@/utils/is'
import { useMarkStore } from '@/store/modules/mark'
import { storeToRefs } from 'pinia'
import { Message } from '@arco-design/web-vue'
const { activeInfo, userIndex, questionIndex, list, nowScore } =
	storeToRefs(useMarkStore())

function generateScorePresets(totalScore: number): number[] {
	if (totalScore < 1) {
		return []
	}

	if (totalScore === 1) {
		return [0.5]
	}

	if (totalScore === 2) {
		return [0.5, 1, 1.5]
	}

	if (totalScore >= 3 && totalScore <= 19) {
		const result: number[] = []
		for (let i = 1; i < totalScore; i++) {
			result.push(i)
		}
		return result
	}

	if (totalScore >= 20 && totalScore <= 37) {
		const result: number[] = []
		const step = 2
		const start = totalScore % 2 === 0 ? 2 : 1
		for (let i = start; i < totalScore; i += step) {
			result.push(i)
		}
		return result
	}

	if (totalScore >= 38 && totalScore <= 90) {
		const result: number[] = [1] // 第一个值总是 1
		for (let i = 5; i < totalScore; i += 5) {
			result.push(i)
		}
		return result
	}

	return []
}
const scoreList = computed(() => {
	const totalScore = activeInfo.value.totalScore ?? 0
	const list = [
		{
			label: '满分',
			value: totalScore,
			class: 'lsh-full-score'
		},
		{
			label: '零分',
			value: 0,
			class: 'lsh-zero-score'
		}
	]
	const otherList = generateScorePresets(totalScore)
		.reverse()
		.map((item) => {
			return {
				label: `${item}`,
				value: item,
				class: 'lsh-score'
			}
		})
	return [...list, ...otherList]
})
const hanInput = (v: number | undefined, e: Event) => {
	if (isUndefined(v)) return
	const integerPart = Math.floor(v)
	const decimalPart = v - integerPart
	if (decimalPart > 0 && decimalPart < 0.5) {
		nowScore.value = integerPart + 0.5
	} else if (decimalPart > 0.5) {
		nowScore.value = integerPart + 1
	} else {
		nowScore.value = v
	}
}
const endText = computed(() => {
	return activeInfo.value.tabsKey === 'user' ? '题' : '人'
})
const isEnd = computed(() => {
	if (userIndex.value === -1) return false
	if (questionIndex.value === -1) return false
	//是否为当前一题的最后一个用户
	if (activeInfo.value.tabsKey === 'question')
		return userIndex.value === list.value.user.length - 1
	//是否为当前用户的最后一题
	return (
		questionIndex.value ===
		list.value.user[userIndex.value].childList.length - 1
	)
})
const nextText = computed(() => {
	if (activeInfo.value.tabsKey === 'user') {
		if (isEnd.value) return '切换到下一人'
		return '下一题'
	}
	if (isEnd.value) return '切换到下一题'
	return '下一人'
})
//切换题目或人
const hanChangeTopic = (isNext: boolean) => {
	if (activeInfo.value.tabsKey === 'user') {
		if (isNext) {
			//如果是最后一题,则切换到下一人的第一题
			if (isEnd.value) {
				//如果是最后一人
				if (userIndex.value === list.value.user.length - 1)
					return Message.warning('当前已是最后一人')
				activeInfo.value.userId = list.value.user[userIndex.value + 1].id
				activeInfo.value.questionId = list.value.user[0].childList[0].id
				return
			}
			activeInfo.value.questionId =
				list.value.user[userIndex.value].childList[questionIndex.value + 1].id
		} else {
			if (questionIndex.value === 0) return Message.warning('当前已是第一题')
			activeInfo.value.questionId =
				list.value.user[userIndex.value].childList[questionIndex.value - 1].id
		}
	} else {
		if (isNext) {
			//如果是最后一人，则切换到下一题的第一个人
			if (isEnd.value) {
				if (questionIndex.value === list.value.question.length - 1)
					return Message.warning('当前已是最后一题')
				activeInfo.value.userId = list.value.user[0].id
				activeInfo.value.questionId =
					list.value.user[0].childList[questionIndex.value + 1].id
				return
			}
			activeInfo.value.userId = list.value.user[userIndex.value + 1].id
		} else {
			if (userIndex.value === 0) return Message.warning('当前已是第一人')
			activeInfo.value.userId = list.value.user[userIndex.value - 1].id
		}
	}
}
const hanSetScore = (score: number) => {
	if (nowScore.value === score) return (nowScore.value = null)
	nowScore.value = score
}
</script>
<style scoped lang="less">
.lsh-set-score {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
	.lsh-top {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
		.lsh-btn-item {
			cursor: pointer;
			color: #0d1014;
			font-size: 14px;
			font-weight: 400;
			height: 32px;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn(@color) {
				cursor: pointer;
				color: @color;
				border: 1px dashed @color;
				width: 52px;
				&:hover {
					background: fade(@color, 8%);
				}
				&.active {
					background: @color;
				}
			}
			&.lsh-full-score {
				.btn(rgba(38, 165, 85, 1));
			}
			&.lsh-zero-score {
				.btn(rgba(255, 76, 38, 1));
			}
			&.lsh-score {
				width: 32px;
				background: #f5f7fa;
				&:hover {
					background: #edf1f7;
				}
				&.active {
					background: #0065ff;
				}
			}
			&.active {
				color: rgba(255, 255, 255, 1);
			}
		}
	}
	.lsh-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		:deep(.arco-btn) {
			flex: 1;
		}
	}
}

.lsh-card-box {
	.lsh-title-box {
		color: #0d1014;
		font-size: 15px;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 16px;
		.lsh-extra {
			display: flex;
			align-items: center;
			gap: 4px;
			.lsh-score-input {
				width: 42px;
				padding: 0 8px;
				:deep {
					.arco-input {
						text-align: center;
					}
				}
			}
		}
	}
	:deep {
		.lsh-card-bottom {
			.lsh-bottom-content {
				padding: 16px 16px 14px;
			}
		}
	}
}
</style>
